<template>
  <el-container class="app-container">
    <!-- 顶部导航栏 -->
    <el-header class="app-header">
      <div class="header-content">
        <!-- 系统标题 -->
        <h1 class="app-title" @click="goHome">
          <img src="/logo.png" alt="logo" class="app-logo" />
          斋堂镇信息录入系统
        </h1>

        <!-- 顶部菜单 -->
        <nav class="app-nav">
          <el-menu
            :default-active="activeMenu"
            mode="horizontal"
            background-color="transparent"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-menu-item index="/" class="no-click">
              <span>首页</span>
            </el-menu-item>

            <el-menu-item index="/edit" class="no-click">
              <span>分类页</span>
            </el-menu-item>

            <el-menu-item index="/tables" class="no-click">
              <span>表页</span>
            </el-menu-item>

            <el-menu-item index="/data" class="no-click">
              <span>编辑页</span>
            </el-menu-item>

            <el-menu-item index="/" @click="goHome" class="return-home">
              <el-icon><House /></el-icon>
              <span>返回首页</span>
            </el-menu-item>
          </el-menu>
        </nav>
      </div>
    </el-header>

    <!-- 主内容区 -->
    <el-main class="app-main">
      <router-view />
    </el-main>

    <!-- 底部 -->
    <el-footer class="app-footer">
      <p>&copy; 2025 斋堂镇信息录入系统 - 数据驱动决策</p>
    </el-footer>
  </el-container>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { House } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()

const currentRegion = computed(() => route.query.region || '')
const currentType = computed(() => route.query.type || '')
const currentTable = computed(() => decodeURIComponent(route.params.tableName || ''))

const activeMenu = computed(() => {
  if (route.path.startsWith('/data')) return '/data'
  if (route.path.startsWith('/tables')) return '/tables'
  if (route.path.startsWith('/edit')) return '/edit'
  return '/'
})

const goHome = () => router.push('/')
</script>

<style scoped>
/* 整体容器背景：浅灰 + 柔光 */
.app-container {
  min-height: 100vh;
  background: linear-gradient(145deg, #eef2f3 0%, #dfe9f3 100%);
  display: flex;
  flex-direction: column;
}

/* 顶部区域带玻璃拟态效果 */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(102, 126, 234, 0.7);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
  padding: 0;
  transition: all 0.3s ease;
}

.header-content {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 30px;
}

/* 系统标题：加轻微浮动动画 */
.app-title {
  color: #fff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, text-shadow 0.2s ease;
}

.app-title:hover {
  transform: translateY(-1px);
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.5);
}

.app-logo {
  width: 32px;
  height: 32px;
}

/* 菜单导航样式优化 */
.app-nav {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

/* 禁止点击项的样式 */
.no-click {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.8;
}
.no-click:hover {
  background-color: transparent !important;
}

/* 返回首页按钮样式微浮动 */
.return-home {
  transition: all 0.2s ease;
}
.return-home:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-2px);
  border-radius: 8px;
}

/* 内容主体带阴影和圆角 */
.app-main {
  flex: 1;
  margin: 20px;
  padding: 24px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.app-main:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* 页脚样式现代化 */
.app-footer {
  background: #343a40;
  color: #ccc;
  text-align: center;
  padding: 15px 0;
  font-size: 14px;
  border-radius: 12px;
  box-shadow: inset 0 1px 6px rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.app-footer:hover {
  color: #fff;
}

/* 菜单优化 */
:deep(.el-menu--horizontal) {
  border-bottom: none;
  background: transparent !important;
}
:deep(.el-menu--horizontal .el-menu-item) {
  font-size: 15px;
  font-weight: 500;
  transition: all 0.2s ease;
}
:deep(.el-menu--horizontal .el-menu-item:hover) {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px;
  transform: translateY(-1px);
}
:deep(.el-menu--horizontal .el-menu-item.is-active) {
  background-color: rgba(255, 255, 255, 0.25) !important;
  border-radius: 8px;
}
.app-header {
  background: linear-gradient(135deg, #3b82f6 0%, #3b82f6 60%, #3b82f6 100%);
  box-shadow: 0 4px 15px rgba(30, 58, 138, 0.3);
  border-bottom: 2px solid rgba(255, 255, 255, 0.15);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: all 0.3s ease;
}

.app-header:hover {
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
  background: linear-gradient(135deg, #3b82f6 0%, #3b82f6 70%, #3b82f6 100%);
}
.app-title {
  color: #fff;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
}

:deep(.el-menu--horizontal .el-menu-item:not(.is-disabled):hover) {
  background-color: rgba(255, 255, 255, 0.12);
  color: #ffe082 !important;
  transition: background-color 0.3s, color 0.3s;
}

</style>
